<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :sm="14">
       <h3> 工作台</h3>
       <!-- 0待办 1已办 -->
        <el-tabs type="border-card">
          <el-tab-pane label="待办">
            <el-table v-loading="loading0" :data="workbenchList0">
              <el-table-column label="id" align="center" prop="id" />
              <el-table-column label="待办事项" align="center" prop="name" />
              <el-table-column label="类型" align="center" prop="type" :formatter="typeFormat" />
              <el-table-column label="用户" align="center" prop="userName" />
               <el-table-column label="店铺" align="center" prop="storeName" />
                <el-table-column label="产品" align="center" prop="productName" />
                 <el-table-column label="日期" align="center" prop="tastDate" />
                 <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
            </el-table>
          <pagination
            v-show="total0>0"
            :total="total0"
            :page.sync="queryParams0.pageNum"
            :limit.sync="queryParams0.pageSize"
            @pagination="getList"
          />
          </el-tab-pane>
          <el-tab-pane label="已办">
            <el-table v-loading="loading1" :data="workbenchList1">
              <el-table-column label="id" align="center" prop="id" />
              <el-table-column label="待办事项" align="center" prop="name" />
              <el-table-column label="类型" align="center" prop="type" :formatter="typeFormat" />
              <el-table-column label="用户" align="center" prop="userName" />
               <el-table-column label="店铺" align="center" prop="storeName" />
                <el-table-column label="产品" align="center" prop="productName" />
                 <el-table-column label="日期" align="center" prop="tastDate" />
                 <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
            </el-table>
             <pagination
            v-show="total1>0"
            :total="total1"
            :page.sync="queryParams1.pageNum"
            :limit.sync="queryParams1.pageSize"
            @pagination="getList"
          />
          </el-tab-pane>
          <el-tab-pane label="全部">
            <el-table v-loading="loading" :data="workbenchList">
              <el-table-column label="id" align="center" prop="id" />
              <el-table-column label="待办事项" align="center" prop="name" />
              <el-table-column label="类型" align="center" prop="type" :formatter="typeFormat" />
              <el-table-column label="用户" align="center" prop="userName" />
               <el-table-column label="店铺" align="center" prop="storeName" />
                <el-table-column label="产品" align="center" prop="productName" />
                 <el-table-column label="日期" align="center" prop="tastDate" />
                 <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
            </el-table>
             <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :sm="10"> 
        <h3> 人员任务看板 </h3>
        <div class="user-kanban-box">
          <el-card class="box-card" v-for="o in 10" :key="o">
            <div class="user-img">
               <el-avatar :size="60" :src="circleUrl"></el-avatar>
            </div>
            <div class="name">
              <span><i class="el-icon-user-solid"></i></span> 张三
            </div>
            <div class="renwu">
             <span><i class="el-icon-s-claim"></i></span> 任务量:50
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listWorkbench, listuserwork} from "@/api/resource/workbench";
export default {
  name: "index",
  data() {
    return {
      // 版本号
      version: "3.3.0",
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      loading:false,
      loading0:false,
      loading1:false,
      total:1,
      total0:1,
      total1:1,
      // 用户绩效列表
      userworklist:[],
      workbenchList: [],
      // 待办
      workbenchList0: [],
      // 已办
      workbenchList1: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 待办
      queryParams0: {
        pageNum: 1,
        pageSize: 10,
        status: 0,
      },
      // 已办
      queryParams1: {
        pageNum: 1,
        pageSize: 10,
        status: 1,
      }
    };
  },
  created(){
    this.getList();
    this.getDicts("workbench_type").then(response => {
      this.typeOptions = response.data;
    });
    this.getDicts("workbench_status").then(response => {
      this.statusOptions = response.data;
    });
    listuserwork().then(res=>{
      console.log(res)
      this.userworklist=res.data;
    })
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    // 类型字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.typeOptions, row.type);
    },
    // 状态字典翻译
    statusFormat(row, column) {
      return this.selectDictLabel(this.statusOptions, row.status);
    },
  /** 查询工作台列表 */
    getList() {
      this.loading = true;
      listWorkbench(this.queryParams).then(response => {
        this.workbenchList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      this.loading0 = true;
      listWorkbench(this.queryParams0).then(response => {
        this.workbenchList0 = response.rows;
        this.total0 = response.total;
        this.loading0 = false;
      });
      this.loading1 = true;
      listWorkbench(this.queryParams1).then(response => {
        this.workbenchList1 = response.rows;
        this.total1 = response.total;
        this.loading1 = false;
      });
    },
  }
};
</script>

<style  lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

</style>
<style lang="scss">
.user-kanban-box{
  display: flex;
  flex-wrap: wrap;
  .el-card__body{
    padding:10px
  }
  .box-card{
  width: 150px;
  margin:10px;
  .name,
  .renwu{
    // line-height: 30px;
    margin-top: 10px;
    font-size: 15px;
    span{
      background:#5cb6ff;
      border-radius:5px;
    padding: 3px 3px ;
    display: inline-block;
    margin-right: 5px;
      i{
       font-size: 18px;
        color: #fff;
      }
    }
  }
  .renwu{
    span{
      background: #4caf80
    }
  }
  .user-img{
    text-align: center;
    img{
      // width: 70%;
      border-radius: 50px;
    }
  }
  .user-item{

    }
  }
}
</style>

